<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>组件的嵌套</title>
    <!-- 安装vue：当你使用script进行vue安装之后，上下文就注册了一个全局变量 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <app></app>
    </div>

    <script>

        // 创建x1组件
        const x1 = {
            template: `
            <div>
                <h3>x1组件</h3>    
            </div>
            `,
        }

        // 创建x组件
        const x = {
            template: `
            <div>
                <h2>x组件</h2>    
                <x1></x1>
            </div>
            `,
            components: {
                x1: x1
            }
        }

        // 创建x1组件
        const y1 = {
            template: `
            <div>
                <h3>y1组件</h3>    
            </div>
            `,
        }

        // 创建y组件
        const y = {
            template: `
            <div>
                <h2>y组件</h2>    
                <y1></y1>
            </div>
            `,
            components: {
                y1: y1
            }
        }



        // 创建app组件
        const app = {
            template: `
            <div>
                <h1>App组件</h1>    
                <x></x>
                <y></y>
            </div>
            `,
            // components: {
            //     x: x,
            //     y: y
            // }
            components: { x, y } //简写形式
        }

        const vm = new Vue({
            el: '#root',
            components: { app } //可以简写
        })

    </script>


</body>

</html>